<template>
    <!-- 常规写法，一个个的传 -->
    <!-- <User 
          :name="userInfo.name" 
          :job="userInfo.job" 
          :age="userInfo.age" 
          @updateUserName="receiverUserName"
          @updateUserAge="receiverUserAge"  
    /> -->
 
    <!-- 简写 使用 v-bind v-on-->
    <User v-bind="userInfo"  v-on="userEventHandlers" />
 </template>
 
 <script setup>
 import { reactive } from 'vue'
 import User from './user.vue'
 
 const userInfo = reactive({
    name: '王大冶',
    job: '前端开发',
    age: 16,
    sex: 'boy'
 })
 
 // const receiverUserName = (userName) => {
 //    alert(userName)
 // }
 // const receiverUserAge = (userAge) =>{
 //    alert(userAge)
 // }
 
 const userEventHandlers = {
    updateUserName(userName) {
       alert(userName)
    },
    updateUserAge(userAge) {
       alert(userAge)
    }
 }
 </script>